<template>
  <div class="ItemNumberSelection">
    <a-row>
      <a-col :span="6">
        <a-select v-model="type" @change="changeQueryTip">
          <a-option value="1" selected>快捷查询</a-option>
          <a-option value="2">客户品名</a-option>
          <a-option value="3">客户品号</a-option>
          <a-option value="4">客户规格</a-option>
        </a-select>
      </a-col>
      <a-col :span="10">
        <a-input-search v-model="queryInfo" search-button class="queryItem" :placeholder="quickQueryTip" @search="getTableData" />
      </a-col>
    </a-row>

    <div class="tableContent">
      <vxe-table
        v-if="result"
        ref="tableRef"
        border
        size="mini"
        :row-config="{ isCurrent: true, isHover: true, keyField: 'id' }"
        :checkbox-config="{ checkRowKeys: selectedRowKeys, highlight: true }"
        :column-config="{ isCurrent: true }"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :data="tabelDom"
        :menu-config="menuConfig"
        @menu-click="contextMenuClickEvent"
        @checkbox-all="selectAllChangeEvent"
        @checkbox-change="selectChangeEvent"
      >
        <vxe-column type="checkbox" width="50"></vxe-column>
        <vxe-column title="客户品号" width="200" align="center">
          <template #default="{ row }">
            {{ row?.mg003 }}
          </template>
        </vxe-column>
        <vxe-column title="客户品名" min-width="320" align="center">
          <template #default="{ row }">
            {{ row?.mg005 }}
          </template>
        </vxe-column>
        <vxe-column title="客户规格" min-width="400" align="center">
          <template #default="{ row }">
            {{ row?.mg006 }}
          </template>
        </vxe-column>
        <vxe-column title="品号" width="200" align="center">
          <template #default="{ row }">
            {{ row?.mb001 }}
          </template>
        </vxe-column>
        <vxe-column title="品名" min-width="320" align="center">
          <template #default="{ row }">
            {{ row?.mb002 }}
          </template>
        </vxe-column>
        <vxe-column title="规格" min-width="400" align="center">
          <template #default="{ row }">
            {{ row?.mb003 }}
          </template>
        </vxe-column>
        <vxe-column title="单位" width="80" align="center">
          <template #default="{ row }">
            {{ row?.mb148 }}
          </template>
        </vxe-column>
        <vxe-column title="仓库" width="200" align="center">
          <template #default="{ row }">
            {{ row?.mc002 }}
          </template>
        </vxe-column>
        <vxe-column title="税种" width="120" align="center">
          <template #default="{ row }">
            {{ row?.ma038 }}
          </template>
        </vxe-column>
        <vxe-column title="税率" width="120" align="center">
          <template #default="{ row }">
            {{ row?.ma101 }}
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <!-- <vxe-pager
      v-model:current-page="pagination.current"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
      @page-change="getTableData"
    >
    </vxe-pager> -->
  </div>
</template>

<script lang="ts">
import importConfig from './customerModal.ts';
import { toRefs } from 'vue';
export default {
  setup() {
    const { base, menuConfig, contextMenuClickEvent, selectAllChangeEvent, selectChangeEvent, getTableData, changeQueryTip } =
      importConfig();

    return {
      ...toRefs(base),
      menuConfig,
      contextMenuClickEvent,
      selectAllChangeEvent,
      selectChangeEvent,
      getTableData,
      changeQueryTip,
    };
  },
};
</script>

<style lang="less" scoped>
.ItemNumberSelection {
  max-height: calc(100vh - 200px);
  box-sizing: border-box;
  overflow: hidden;

  .tableContent {
    max-height: calc(100vh - 315px);
    overflow-y: auto;

    :deep(.vxe-table--render-default .vxe-table--body-wrapper) {
      overflow-x: hidden;
    }

    :deep(.vxe-table) {
      width: 2500px;
    }
  }

  .queryItem {
    margin-bottom: 10px;
    margin-left: 15px;
  }

  :deep(.vxe-pager) {
    margin-top: 15px;
  }
}
</style>
